import React,{Component} from 'react'

import { Input,Select,Checkbox,Button,Table,Tag ,Tooltip,Icon,DatePicker  } from 'antd';

import locale from 'antd/lib/date-picker/locale/zh_CN';

import moment from 'moment';

import 'moment/locale/zh-cn';

moment.locale('zh-cn');

const Option = Select.Option;

const Label=(props)=>{
    return <div className="search-li">
                <label className="label-d">{props.name}</label>
                 <Input id={props.id} name={props.kname} value={props.value} defaultValue="" placeholder={props.plac} onChange={props.onchange}/>
            </div>
  }
class Screnhead extends Component{
    constructor(props){
         super(props)
         this.state={
            isshow:false
         }
    }
    //更多条件
    showmore(){
        this.setState(prevState=>({
            isshow:!prevState.isshow
        }));
    }
    render(){
        return(
            <div>
                <div className="head-title">筛选查询</div>
                <div className="search-list">
                    <Label name="关键字" id="key" plac="输入商品名称、编号、类目、品牌" value={this.state.keyvalue} onchange={(e)=>this.vauleChange(e)} kname="keyvalue"></Label>
                    <div className="search-li">
                        <label className="label-d">模板关联状态</label>
                        <Select defaultValue="lucy" style={{ width: 165 }} onChange={(value,e)=>this.handleChange(value,e)} name="mustaus">
                            <Option value="jack">Jack</Option>
                            <Option value="lucy">Lucy</Option>
                            <Option value="disabled" disabled>Disabled</Option>
                            <Option value="Yiminghe">yiminghe</Option>
                        </Select>
                    </div>
                    <div className="search-li">
                        <label className="label-d">付款类型</label>
                        <Select defaultValue="微信" style={{ width: 165 }} onChange={this.handleChange}>
                            <Option value="微信">微信</Option>
                            <Option value="支付宝">支付宝</Option>
                            <Option value="一次付款">一次付款</Option>
                        </Select>
                    </div>
                    <div className="search-li">
                        <Checkbox>包邮</Checkbox>
                        <Checkbox>推荐</Checkbox>
                    </div>
                    <Button type="" icon="search" className="nomal new-btn">搜索</Button>
                    <Button type="" >重置</Button>
                    <Button className="screen"  onClick={()=>this.showmore()}>综合筛选<Icon type="double-right"/></Button>
                </div>
                <div className={this.state.isshow?"search-list vshow":'search-list vhide'}>
                    <Label name="品牌名称" id="key" value={this.state.brandname} onchange={(e)=>this.vauleChange(e)} kname="brandname"></Label>
                    <Label name="模板名称" id="mb-name" value={this.state.muname} onchange={(e)=>this.vauleChange(e)} kname="muname"></Label>
                    <Label name="属性标签" id="mb-name" value={this.state.tagname} onchange={(e)=>this.vauleChange(e)} kname="tagname"></Label>
                    <div className="search-li">
                        <label className="create-time">创建时间</label>
                        <DatePicker
                            disabledDate={this.disabledStartDate}
                            showTime
                            format="YYYY-MM-DD HH:mm:ss"
                            value={this.state.startValue}
                            placeholder="开始时间"
                            onChange={this.onStartChange}
                            onOpenChange={this.handleStartOpenChange}
                            locale={locale}
                        />
                        <span className="line"></span>
                        <DatePicker
                        disabledDate={this.disabledEndDate}
                        showTime
                        format="YYYY-MM-DD HH:mm:ss"
                        value={this.state.endValue}
                        placeholder="结束时间"
                        onChange={this.onEndChange}
                        open={this.state.endOpen}
                        onOpenChange={this.handleEndOpenChange}
                        locale={locale}
                        />
                    </div>
                </div>                
            </div>
        )
    }
}
export default Screnhead